<template>
  <view>
    <!-- 状态栏 -->
    <view class="status_bar" style="background-color: #191919;position: sticky;top: 0;z-index: 999;"></view>

    <!-- 轮播 -->
    <view class="bg-img" style="background-image: url(../../static/images/tb1.png);height: 500rpx;background-size: 100% 100%;"></view>

    <view class="padding-lr" style="margin-top: -490rpx;">
      <uni-notice-bar :speed="30" backgroundColor="transparent" color="#fff" showIcon scrollable="true" single="true"
        :text="notice"></uni-notice-bar>
      <swiper class="swiper" indicator-color="rgba(255,255,255,0.8)" indicator-active-color="rgba(255,255,255,1)"
        :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
        <swiper-item v-for="i in carousel" :key="i.id">
          <view class="swiper-item">
            <image :src="i.picture" mode=""></image>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 宫格 -->
    <view class="padding-lr margin-bottom-sm" style="margin-top: -12rpx;">
      <view class="grid text-center col-4 top-nav padding-tb bg-white">
        <view class="nav padding-tb-xs" hover-class="on" v-for="i in grids" :key="i.id" @click="$goto(i.path)">
          <view class="cu-avatar lg round" :style="'background-image: url(' + i.icon + ')'"></view>
          <view class="margin-top-xs">{{i.text}}</view>
        </view>
      </view>
    </view>

    <!-- 三按钮 -->
    <view class="padding-lr padding-top">
      <view class="three-btn flex justify-around">
        <view class="btn" @click="$goto('/pages/shop/main')">
          <image class="img" src="../../static/images/btn1.png" mode=""></image>
          <view>惠民商品</view>
        </view>
        <view class="btn" @click="$goto('/pages/tabbar/tab3', 'tab')">
          <image class="img" src="../../static/images/btn3.png" mode=""></image>
          <view>邀请有奖</view>
        </view>
      </view>
    </view>

    <!-- 邀请 -->
    <view class="padding-lr margin-bottom" @click="$goto('/pages/tabbar/tab3', 'tab')">
      <image src="../../static/images/go.png" style="width: 100%;" mode="widthFix"></image>
    </view>

    <!-- 热销商品 -->
    <view class="padding-tb-sm padding-lr">
      <view class="block-title">
        <view class="title">
          热销商品
        </view>
        <view class="more" @click="$goto('/pages/shop/main')">
          更多
        </view>
      </view>

      <view class="three-pic padding-top">
        <view class="bg-img pic" :style="'background-image: url(' + i.picture[0] + ')'" v-for="i in hot" :key="i.id"
          @click="$goto('/pages/shop/goods?id='+i.id)">
          <view class="tag">
            平台推荐
          </view>
        </view>
      </view>
    </view>


    <!-- 惠民商品 -->
    <view class="padding-tb-sm padding-lr">
      <view class="block-title">
        <view class="title">
          惠民商品
        </view>
        <view class="more" @click="$goto('/pages/shop/main')">
          更多
        </view>
      </view>

      <view class="grid col-2 goods">
        <view :class="[ (k%2==0) ? 'left' : 'right' ]" v-for="(i,k) in goods" :key="i.id" @click="$goto('/pages/shop/goods?id='+i.id)">
          <view class="good margin-top">
            <view class="bg-img" :style="'background-image: url(' + i.full_thumbnail + ')'"></view>
            <view class="info padding-xs">
              <view class="title">{{i.goods_name + ' ' + i.goods_attr[0].attr_name}}</view>
              <view class="price padding-tb-xs">
                <view class="cu-tag bg-orange sm margin-right-xs">
                  会员价
                </view>
                <view class="text-price text-lg text-red text-cut margin-right-xs">
                  {{i.goods_attr[0].attr_price}}
                </view>
                <view class="text-price text-sm text-gray text-cut margin-right-xs old">
                  {{i.goods_attr[0].original_price}}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="padding flex justify-center">
      <view class="more btn" @click="$goto('/pages/shop/main')">
        更多商品
      </view>
    </view>

    <!-- #ifdef H5 -->
    <beian />
    <!-- #endif -->
  </view>
</template>

<script>
  import beian from '../../components/beian.vue'
  export default {
    components: {
      beian
    },
    data() {
      return {
        notice: '',
        carousel: [],
        hot: [],
        goods: [],
        grids: [{
            id: 0,
            text: '话费充值',
            icon: '../../static/images/11.png',
            path: '/pages/mine/recharge'
          },
          {
            id: 1,
            text: '油卡充值',
            icon: '../../static/images/12.png',
            path: '/pages/mine/recharge-oil'
          },
          {
            id: 2,
            text: '生活缴费',
            icon: '../../static/images/13.png',
            path: ''
          },
          {
            id: 3,
            text: '更多服务',
            icon: '../../static/images/14.png',
            path: ''
          }
        ]
      }
    },
    onLoad() {
      this.getData();
      this.getGoods();
    },
    methods: {
      getData() {
        this.$u.get('/index/data?position=1').then(res => {
          let data = res.data.result

          let {
            notice,
            carousel
          } = data
          this.notice = notice.author + ':' + notice.content
          this.carousel = carousel
        })
      },
      getGoods() {
        this.$u.get('/goods/index').then(res => {
          this.hot = res.data.result.hot
          this.goods = res.data.result.recommend
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .swiper {
    height: 330rpx;
    position: relative;
    z-index: 0;

    .swiper-item {
      width: 100%;
      height: 100%;
    }
  }

  .top-nav {
    border-radius: 16rpx;
    box-shadow: 4rpx 4rpx 4rpx #F1F0F0, -4rpx 4rpx 4rpx #F1F0F0;
    position: relative;
    z-index: 1;

    .nav {
      &.on {
        background-color: #F5F5F5;
      }
    }
  }



  .goods {
    .left {
      padding-right: 15rpx;
    }

    .right {
      padding-left: 15rpx;
    }

    .good {
      border: 1px solid #F3F3F3;

      .bg-img {
        width: 100%;
        padding-bottom: 100%;
      }

      .title {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .info {
        height: 150rpx;
        display: flex;
        justify-content: space-between;
        flex-direction: column;

        .price {
          display: flex;
          align-items: center;

          .cu-tag {
            padding: 8rpx !important;
            font-size: 18rpx;
            height: 32rpx;
          }

          .old {
            text-decoration: line-through;
          }
        }
      }
    }
  }

  .three-btn {
    .btn {
      width: 300rpx;
      padding: 26rpx 16rpx;
      border-radius: 16rpx;
      border: 1rpx solid #DCDBDC;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 1rpx 1rpx 1rpx #F5EEE2, -1rpx -1rpx 1rpx #F5EEE2;

      .img {
        width: 40rpx;
        height: 40rpx;
        margin-right: 20rpx;
        filter: drop-shadow(0rpx 16rpx 8rpx #DEDDDD);
      }
    }
  }

  .three-pic {
    display: flex;
    justify-content: space-between;

    .pic {
      position: relative;
      width: 220rpx;
      height: 320rpx;
      border-radius: 20rpx;

      .tag {
        color: #fff;
        display: inline-block;
        position: absolute;
        left: 0;
        bottom: 30rpx;
        font-size: 24rpx;
        padding: 8rpx 16rpx;
        letter-spacing: 2rpx;
        background-color: rgba(59, 65, 76, 0.5);
      }
    }
  }

  .block-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      color: black;
      font-size: 32rpx;
      font-weight: bold;
      letter-spacing: 4rpx;
    }

    .more {
      color: #B9B9B9;
    }
  }
</style>
